<template>
  <div>
    <div class="section">
      <FormItem
        :required="true"
        label="您是否需要对身份保密？">
        <Radio v-model="is_secret" label="是" value="1"/>
        <Radio v-model="is_secret" label="不要求" value="0"/>
      </FormItem>

      <FormItem
        :required="true"
        label="公司/单位名称">
        <Input v-model="name" placeholder="请输入公司或单位名称"/>
      </FormItem>

      <FormItem
        :required="true"
        label="公司/单位简称">
        <Input v-model="short_name" placeholder="请输入公司或单位简称"/>
      </FormItem>

      <FormItem
        :required="level_type == 2"
        label="公司/单位经营地址">
        <Input v-model="office_address" placeholder="请输入公司或单位经营地址"/>
      </FormItem>
      <FormItem
        :required="level_type == 2"
        label="办公电话">
        <Input v-model="office_phone" type="tel" filter="int" placeholder="请输入公司或单位办公电话"/>
      </FormItem>
    </div>

    <div class="page-footer">
      <button class="btn btn-primary btn-block" :disabled="!formValid" @click="submit">下一步</button>
    </div>
  </div>
</template>
<script>
import Input from '~/components/Input';
import Radio from '~/components/Radio'
import Checkbox from '~/components/Checkbox'
import FormItem from '~/components/CompleteItem'
import UploadItem from '~/components/UploadItem'

export default {
  components:{
    Input,
    Radio,
    FormItem,
    Checkbox,
    UploadItem
  },
  data(){
    return {
      is_secret:'',
      name:'',
      short_name:'',
      office_address:'',
      office_phone:'',

      loading:false,
      step:2,
      pageData:{},
      level_type: 1,
    }
  },
  computed:{
    formValid(){
      let flag = false;
      if(String(this.name).trim() &&
        String(this.is_secret).trim() &&
        String(this.short_name).trim() &&
        (!(this.level_type == 2) || String(this.office_address).trim()) &&
        (!(this.level_type == 2) || String(this.office_phone).trim()))
      {
        flag = true;
      }

      return flag;
    }
  },
  async mounted(){
    this.$emit('setTitle','机构基础信息')
    this.$store.commit('completeInfo/setStep',this.$route.name)

    await this.getCompleteInfo();
  },
  methods:{
    async getCompleteInfo(){
      this.$emit('loading',true);
      try{
        let {data:rs} = await this.$axios.post('?ct=api&ac=get_complete_info',{
          step:this.step,
        })
        if(rs.code == 0){
          this.pageData = rs.data;
          this.level_type = this.pageData.page_data.level_type;
          let {page_data} = rs.data;

           //初始化数据
          this.is_secret = page_data.is_secret;
          this.name = page_data.name;
          this.short_name = page_data.short_name;
          this.office_address = page_data.office_address;
          this.office_phone = page_data.office_phone;
          this.is_secret = page_data.is_secret;
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
      this.$emit('loading',false);

    },
    submit(){
      if(this.loading) return false;
      if(!this.formValid){
        this.$toast('请完善表单信息');
        return false;
      }
      this.$emit('submit',{
        step:this.step,
        name:this.name,
        is_secret:this.is_secret,
        short_name:this.short_name,
        office_address:this.office_address,
        office_phone:this.office_phone,
      },()=>{
        this.$router.push({name:'complete_info-org_paper'})
      })
    }
  }
}
</script>
<style lang="less" scoped>
.page-top-tip {
  margin-bottom:40px;
  font-size:24px;
  color:#c0c3cc;
  code {
    color:#f05521;
    font-style: normal;
  }
}

.section + .section {
  border-top: 14px solid #edeef0;
}
</style>

